<template>
  <div class="containerbox">
    <div class="panel">
      <el-row :gutter="20" type="flex" class="home">
        <el-col :span="6">
          <div class="grid bg-purple">
            <div class="title">
              <h3>今日访问</h3>
            </div>
            <div class="content">
              <div class="number">123</div>
              <div class="image">
                <img src="../../../public/static/images/visit.png" alt="" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid bg-purple">
            <div class="title">
              <h3>停车统计</h3>
            </div>
            <div class="content">
              <div class="number">263</div>
              <div class="image">
                <img src="../../../public/static/images/car.png" alt="" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid bg-purple">
            <div class="title">
              <h3>收入</h3>
            </div>
            <div class="content">
              <div class="number">668</div>
              <div class="image">
                <img src="../../../public/static/images/money.png" alt="" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid bg-purple">
            <div class="title">
              <h3>下载次数</h3>
            </div>
            <div class="content">
              <div class="number">56</div>
              <div class="image">
                <img src="../../../public/static/images/download.png" alt="" />
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="18">
          <div class="grid3 bg-purple">
            <div class="map" ref="echart1"></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid1 bg-purple">
            <!-- 消息盒子 -->
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>消息</span>
              </div>
              <div v-for="o in 12" :key="o" class="text item">
                {{ "消息内容 " + o }}
                <span class="time">2022/03/06 15:00</span>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";
require("echarts/extension/bmap/bmap");

export default {
  data() {
    return {
      list: {},
    };
  },
  methods: {
    async setEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.echart1);
      var startColor = [
        "#0e94eb",
        "#c440ef",
        "#efb013",
        "#FFD700",
        "#8470FF",
        "#2e4af8",
        "#0eebc4",
        "#f129b1",
        "#17defc",
        "#f86363",
      ];

      // console.log(this.$refs.echart1);

      /*   var ROOT_PATH =
        "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";
      var app = {};
      var option; */

      /*       await axios({
        method: "GET",
        url: ROOT_PATH + "/data/asset/data/hangzhou-tracks.json",
      }).then(function (res) {
        // console.log(res.data);
        var data = res.data;
        var points = [].concat.apply(
          [],
          data.map(function (track) {
            return track.map(function (seg) {
              return seg.coord.concat([1]);
            });
          })
        );
        myChart.setOption(
          (option = {
            animation: false,
            bmap: {
              center: [120.13066322374, 30.240018034923],
              zoom: 14,
              roam: true,
            },
            visualMap: {
              show: false,
              top: "top",
              min: 0,
              max: 5,
              seriesIndex: 0,
              calculable: true,
              inRange: {
                color: ["blue", "blue", "green", "yellow", "red"],
              },
            },
            series: [
              {
                type: "heatmap",
                coordinateSystem: "bmap",
                data: points,
                pointSize: 5,
                blurSize: 6,
              },
            ],
          })
        );
        // 添加百度地图插件
        var bmap = myChart.getModel().getComponent("bmap").getBMap();
        bmap.addControl(new BMap.MapTypeControl());
      }); */

      //组件大小随窗口自适应
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      /*       var option = {
        title: {
          // text: "一周停车时长占比",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
          textStyle: {
            fontSize: 15,
            color: "black",
          },
        },
        grid: {
          left: "3%",
          right: "7%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              // 设置y轴颜色
              color: "#126CAB",
            },
          },
        },
        yAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisLine: {
            lineStyle: {
              // 设置y轴颜色
              color: "#126CAB",
            },
          },
        },
        series: [
          {
            name: "0-4点",
            type: "bar",
            stack: "total",
            left: 0,
            right: "20%",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [20, 22, 34, 22, 29, 34, 33],
            color: startColor[0],
          },
          {
            name: "4-8点",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [42, 42, 41, 44, 45, 56, 54],
            color: startColor[5],
          },
          {
            name: "8-12点",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [60, 62, 61, 64, 60, 112, 104],
            color: startColor[4],
          },
          {
            name: "12-16点",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [50, 62, 71, 54, 60, 117, 98],
            color: "#9932CC",
          },
          {
            name: "16-20点",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [52, 52, 51, 54, 86, 95, 104],
            color: "#DEB887",
          },
          {
            name: "20-24点",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [40, 42, 44, 52, 79, 92, 87],
            color: startColor[2],
          },
        ],
      }; */

      const dateList = [
        ["2022-01-01", "节假日"],
        ["2022-01-02", "节假日"],
        ["2022-01-03", "节假日"],
        ["2022-01-04"],
        ["2022-01-05"],
        ["2022-01-06"],
        ["2022-01-07"],
        ["2022-01-08"],
        ["2022-01-09"],
        ["2022-01-10"],
        ["2022-01-11"],
        ["2022-01-12"],
        ["2022-01-13"],
        ["2022-01-14"],
        ["2022-01-15"],
        ["2022-01-16"],
        ["2022-01-17"],
        ["2022-01-18"],
        ["2022-01-19"],
        ["2022-01-20"],
        ["2022-01-21"],
        ["2022-01-22"],
        ["2022-01-23"],
        ["2022-01-24"],
        ["2022-01-25"],
        ["2022-01-26"],
        ["2022-01-27"],
        ["2022-01-28"],
        ["2022-01-29"],
        ["2022-01-30"],
        ["2022-01-31", "节假日"],
        ["2022-02-01", "节假日"],
        ["2022-02-02", "节假日"],
        ["2022-02-03", "节假日"],
        ["2022-02-04", "节假日"],
        ["2022-02-05", "节假日"],
        ["2022-02-06", "节假日"],
        ["2022-02-07"],
        ["2022-02-08"],
        ["2022-02-09"],
        ["2022-02-10"],
        ["2022-02-11"],
        ["2022-02-12"],
        ["2022-02-13"],
        ["2022-02-14"],
        ["2022-02-15"],
        ["2022-02-16"],
        ["2022-02-17"],
        ["2022-02-18"],
        ["2022-02-19"],
        ["2022-02-20"],
        ["2022-02-21"],
        ["2022-02-22"],
        ["2022-02-23"],
        ["2022-02-24"],
        ["2022-02-25"],
        ["2022-02-26"],
        ["2022-02-27"],
        ["2022-02-28"],
        ["2022-03-01"],
        ["2022-03-02"],
        ["2022-03-03"],
        ["2022-03-04"],
        ["2022-03-05"],
        ["2022-03-06"],
        ["2022-03-07"],
        ["2022-03-08"],
        ["2022-03-09"],
        ["2022-03-10"],
        ["2022-03-11"],
        ["2022-03-12"],
        ["2022-03-13"],
        ["2022-03-14"],
        ["2022-03-15"],
        ["2022-03-16"],
        ["2022-03-17"],
        ["2022-03-18"],
        ["2022-03-19"],
        ["2022-03-20"],
        ["2022-03-21"],
        ["2022-03-22"],
        ["2022-03-23"],
        ["2022-03-24"],
        ["2022-03-25"],
        ["2022-03-26"],
        ["2022-03-27"],
        ["2022-03-28"],
        ["2022-03-29"],
        ["2022-03-30"],
        ["2022-03-31"],
        ["2022-04-01"],
        ["2022-04-02"],
        ["2022-04-03", "节假日"],
        ["2022-04-04", "节假日"],
        ["2022-04-05", "节假日"],
        ["2022-04-06"],
        ["2022-04-07"],
        ["2022-04-08"],
        ["2022-04-09"],
        ["2022-04-10"],
        ["2022-04-11"],
        ["2022-04-12"],
        ["2022-04-13"],
        ["2022-04-14"],
        ["2022-04-15"],
        ["2022-04-16"],
        ["2022-04-17"],
        ["2022-04-18"],
        ["2022-04-19"],
        ["2022-04-20"],
        ["2022-04-21"],
        ["2022-04-22"],
        ["2022-04-23"],
        ["2022-04-24"],
        ["2022-04-25"],
        ["2022-04-26"],
        ["2022-04-27"],
        ["2022-04-28"],
        ["2022-04-29"],
        ["2022-04-30", "节假日"],
        ["2022-05-01", "节假日"],
        ["2022-05-02", "节假日"],
        ["2022-05-03", "节假日"],
        ["2022-05-04", "节假日"],
        ["2022-05-05"],
        ["2022-05-06"],
        ["2022-05-07"],
        ["2022-05-08"],
        ["2022-05-09"],
        ["2022-05-10"],
        ["2022-05-11"],
        ["2022-05-12"],
        ["2022-05-13"],
        ["2022-05-14"],
        ["2022-05-15"],
        ["2022-05-16"],
        ["2022-05-17"],
        ["2022-05-18"],
        ["2022-05-19"],
        ["2022-05-20"],
        ["2022-05-21"],
        ["2022-05-22"],
        ["2022-05-23"],
        ["2022-05-24"],
        ["2022-05-25"],
        ["2022-05-26"],
        ["2022-05-27"],
        ["2022-05-28"],
        ["2022-05-29"],
        ["2022-05-30"],
        ["2022-05-31"],
        ["2022-06-01"],
        ["2022-06-02"],
        ["2022-06-03", "节假日"],
        ["2022-06-04", "节假日"],
        ["2022-06-05", "节假日"],
        ["2022-06-06"],
        ["2022-06-07"],
        ["2022-06-08"],
        ["2022-06-09"],
        ["2022-06-10"],
        ["2022-06-11"],
        ["2022-06-12"],
        ["2022-06-13"],
        ["2022-06-14"],
        ["2022-06-15"],
        ["2022-06-16"],
        ["2022-06-17"],
        ["2022-06-18"],
        ["2022-06-19"],
        ["2022-06-20"],
        ["2022-06-21"],
        ["2022-06-22"],
        ["2022-06-23"],
        ["2022-06-24"],
        ["2022-06-25"],
        ["2022-06-26"],
        ["2022-06-27"],
        ["2022-06-28"],
        ["2022-06-29"],
        ["2022-06-30"],
        ["2022-07-01"],
        ["2022-07-02"],
        ["2022-07-03"],
        ["2022-07-04"],
        ["2022-07-05"],
        ["2022-07-06"],
        ["2022-07-07"],
        ["2022-07-08"],
        ["2022-07-09"],
        ["2022-07-10"],
        ["2022-07-11"],
        ["2022-07-12"],
        ["2022-07-13"],
        ["2022-07-14"],
        ["2022-07-15"],
        ["2022-07-16"],
        ["2022-07-17"],
        ["2022-07-18"],
        ["2022-07-19"],
        ["2022-07-20"],
        ["2022-07-21"],
        ["2022-07-22"],
        ["2022-07-23"],
        ["2022-07-24"],
        ["2022-07-25"],
        ["2022-07-26"],
        ["2022-07-27"],
        ["2022-07-28"],
        ["2022-07-29"],
        ["2022-07-30"],
        ["2022-07-31"],
        ["2022-08-01"],
        ["2022-08-02"],
        ["2022-08-03"],
        ["2022-08-04"],
        ["2022-08-05"],
        ["2022-08-06"],
        ["2022-08-07"],
        ["2022-08-08"],
        ["2022-08-09"],
        ["2022-08-10"],
        ["2022-08-11"],
        ["2022-08-12"],
        ["2022-08-13"],
        ["2022-08-14"],
        ["2022-08-15"],
        ["2022-08-16"],
        ["2022-08-17"],
        ["2022-08-18"],
        ["2022-08-19"],
        ["2022-08-20"],
        ["2022-08-21"],
        ["2022-08-22"],
        ["2022-08-23"],
        ["2022-08-24"],
        ["2022-08-25"],
        ["2022-08-26"],
        ["2022-08-27"],
        ["2022-08-28"],
        ["2022-08-29"],
        ["2022-08-30"],
        ["2022-08-31"],
        ["2022-09-01"],
        ["2022-09-02"],
        ["2022-09-03"],
        ["2022-09-04"],
        ["2022-09-05"],
        ["2022-09-06"],
        ["2022-09-07"],
        ["2022-09-08"],
        ["2022-09-09"],
        ["2022-09-10", "节假日"],
        ["2022-09-11", "节假日"],
        ["2022-09-12", "节假日"],
        ["2022-09-13"],
        ["2022-09-14"],
        ["2022-09-15"],
        ["2022-09-16"],
        ["2022-09-17"],
        ["2022-09-18"],
        ["2022-09-19"],
        ["2022-09-20"],
        ["2022-09-21"],
        ["2022-09-22"],
        ["2022-09-23"],
        ["2022-09-24"],
        ["2022-09-25"],
        ["2022-09-26"],
        ["2022-09-27"],
        ["2022-09-28"],
        ["2022-09-29"],
        ["2022-09-30"],
        ["2022-10-01", "节假日"],
        ["2022-10-02", "节假日"],
        ["2022-10-03", "节假日"],
        ["2022-10-04", "节假日"],
        ["2022-10-05", "节假日"],
        ["2022-10-06", "节假日"],
        ["2022-10-07", "节假日"],
        ["2022-10-08"],
        ["2022-10-09"],
        ["2022-10-10"],
        ["2022-10-11"],
        ["2022-10-12"],
        ["2022-10-13"],
        ["2022-10-14"],
        ["2022-10-15"],
        ["2022-10-16"],
        ["2022-10-17"],
        ["2022-10-18"],
        ["2022-10-19"],
        ["2022-10-20"],
        ["2022-10-21"],
        ["2022-10-22"],
        ["2022-10-23"],
        ["2022-10-24"],
        ["2022-10-25"],
        ["2022-10-26"],
        ["2022-10-27"],
        ["2022-10-28"],
        ["2022-10-29"],
        ["2022-10-30"],
        ["2022-10-31"],
        ["2022-11-01"],
        ["2022-11-02"],
        ["2022-11-03"],
        ["2022-11-04"],
        ["2022-11-05"],
        ["2022-11-06"],
        ["2022-11-07"],
        ["2022-11-08"],
        ["2022-11-09"],
        ["2022-11-10"],
        ["2022-11-11"],
        ["2022-11-12"],
        ["2022-11-13"],
        ["2022-11-14"],
        ["2022-11-15"],
        ["2022-11-16"],
        ["2022-11-17"],
        ["2022-11-18"],
        ["2022-11-19"],
        ["2022-11-20"],
        ["2022-11-21"],
        ["2022-11-22"],
        ["2022-11-23"],
        ["2022-11-24"],
        ["2022-11-25"],
        ["2022-11-26"],
        ["2022-11-27"],
        ["2022-11-28"],
        ["2022-11-29"],
        ["2022-11-30"],
        ["2022-12-01"],
        ["2022-12-02"],
        ["2022-12-03"],
        ["2022-12-04"],
        ["2022-12-05"],
        ["2022-12-06"],
        ["2022-12-07"],
        ["2022-12-08"],
        ["2022-12-09"],
        ["2022-12-10"],
        ["2022-12-11"],
        ["2022-12-12"],
        ["2022-12-13"],
        ["2022-12-14"],
        ["2022-12-15"],
        ["2022-12-16"],
        ["2022-12-17"],
        ["2022-12-18"],
        ["2022-12-19"],
        ["2022-12-20"],
        ["2022-12-21"],
        ["2022-12-22"],
        ["2022-12-23"],
        ["2022-12-24"],
        ["2022-12-25"],
        ["2022-12-26"],
        ["2022-12-27"],
        ["2022-12-28"],
        ["2022-12-29"],
        ["2022-12-30"],
        ["2022-12-31"],
      ];

      let heatmapData = [];
      let lunarData = [];
      for (let i = 0; i < dateList.length; i++) {
        heatmapData.push([dateList[i][0], Math.random() * 100]);
        lunarData.push([dateList[i][0], dateList[i][1]]);
      }
      var option = {
        tooltip: {
          formatter: function (params) {
            return "车位占用率: " + params.value[1].toFixed(2);
          },
        },
        visualMap: {
          show: false,
          min: 0,
          max: 100,
          calculable: true,
          seriesIndex: [2],
          orient: "horizontal",
          left: "center",
          bottom: 20,
          inRange: {
            color: ["#082741", "#0e94eb"],
            opacity: 1,
          },
          controller: {
            inRange: {
              opacity: 1,
            },
          },
        },
        calendar: [
          {
            left: "center",
            top: "middle",
            cellSize: [100, 50],
            yearLabel: { show: false },
            orient: "vertical",
            dayLabel: {
              firstDay: 1,
              nameMap: "cn",
            },
            monthLabel: {
              show: false,
            },
            range: "2022-04",
          },
        ],
        series: [
          {
            type: "scatter",
            coordinateSystem: "calendar",
            symbolSize: 1,
            label: {
              show: true,
              formatter: function (params) {
                var d = echarts.number.parseDate(params.value[0]);
                return d.getDate();
              },
              color: "#FFFAF0",
            },
            data: lunarData,
          },
          {
            type: "scatter",
            coordinateSystem: "calendar",
            symbolSize: 1,
            label: {
              show: true,
              formatter: function (params) {
                return "\n\n\n" + (params.value[2] || "");
              },
              fontSize: 10,
              fontWeight: 70,
              color: "#a00",
            },
            data: lunarData,
          },
          {
            name: "车位占用率",
            type: "heatmap",
            coordinateSystem: "calendar",
            data: heatmapData,
          },
        ],
      };

      myChart.setOption(option);
    },
  },
  // 要在组件之后生成
  mounted() {
    this.setEcharts();
  },
};
</script>

<style lang="scss">
.containerbox {
  padding: 0;
  margin: 0;
  height: 100%;
  // background-color: #f0f2f5;
}
.panel {
  margin: 30px auto;
  width: 1248px;
  // background-color: white;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid {
  width: 282px;
  height: 123px;
  min-height: 36px;
  background-color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .title {
    width: 100%;
    h3 {
      display: inline-block;
      margin: 0 auto;
      height: 42px;
      width: 100%;
      text-align: center;
      font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial,
        sans-serif;
      line-height: 42px;
      color: #333;
      border-bottom: 1px solid #f6f6f6;
    }
  }
  .content {
    width: 100%;
    display: flex;
    .number {
      height: 80px;
      width: 200px;
      border-right: 1px solid #f6f6f6;
      font-size: 29px;
      color: #333;
      text-align: center;
      line-height: 80px;
    }
    .image {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80px;
      width: 81px;
      img {
        display: inline-block;

        height: 60px;
        width: 61px;
      }
    }
  }
}

.grid3 {
  width: calc(100% - 13px);
  height: 468px;
  min-height: 36px;
  background-color: white;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.map {
  width: 100%;
  height: 100%;
  position: relative;
}
.grid1 {
  width: calc(100% - 13px);
  height: 468px;
  min-height: 36px;
  background-color: white;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

// 卡片盒子
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 25px;
  .time {
    float: right;
  }
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  height: 100%;
}
</style>
